<template>
	<view class="">
		<view class="setting-page">
			<!-- Header -->
			<Header></Header>
			<view class="setting-conent">
				<view class="setting-title">
					<view class="setting-title-txt-app">
						设置/修改密码
					</view>
				</view>
				<view class="setting-info">
					<view class="setting-area">
						<view class="setting-area-tip">
							<Tip :tipInfo="tipInfo"></Tip>
						</view>

						<view class="setting-area-info">
							<view class="info-li">
								<view class="info-title">
									当前密码
								</view>
								<view class="info-val">
									<input v-model="form.ole_pass_word" type="password" class="setting-input"
										placeholder="请输入当前密码" placeholder-style="color: #BFC7D5;font-size: 14px;">
								</view>
							</view>
							<view class="info-li">
								<view class="info-title">
									新密码
								</view>
								<view class="info-val">
									<input v-model="form.new_pass_word" type="password" class="setting-input"
										placeholder="请设置新密码" placeholder-style="color: #BFC7D5;font-size: 14px;">
									<view class="pwd-tip">
										新密码6-10位，由数字合字母组成
									</view>
								</view>
							</view>
							<view class="info-li">
								<view class="info-title">
									确认新密码
								</view>
								<view class="info-val">
									<input v-model="form.confirm_pass_word" type="password" class="setting-input"
										placeholder="请再次输入确认密码" placeholder-style="color: #BFC7D5;font-size: 14px;">
								</view>
							</view>
							<view class="pc-btn">
								<view class="submit-password" style="display: block;padding: 0;">
									<button style="width: 108px;
										 height: 36px;
										background: #26bbff;
										border-radius: 4px;
										color: #ffffff;
										font-size: 14px;" @click="submit">立即提交</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-password">
			<button class="submit-password-btn" @click="submit">立即提交</button>
		</view>
		<Footer class="page-footer-bottom"></Footer>
		<ToastComp v-if="toastInfo.visible" :toastInfo="toastInfo" @closeToast="closeToast" @canel="cancelFun" @cancel="confirmFun"></ToastComp>
	</view>
</template>

<script>
	import ToastComp from "@/components/ToastComp/ToastComp.vue"
	import Header from "@/components/Header/Header.vue"
	import Footer from "@/components/Footer/Footer.vue"
	import Tip from "@/components/Tip/Tip.vue"
	import UploadFile from "@/components/UploadFile/UploadFile.vue"
	import {
		changePassword
	} from "@/common/api/user.js"
	import {
		regPwd
	} from "@/utils/reg.js"
	export default {
		data() {
			return {
				// toast
				toastInfo: {
					visible: false,
					type: 'success',
					title: '',
					subTitle: '',
					cancel: false,
					confirm: false,
					closeShow: false
				},
				tipInfo: {
					text: '1. 密码一日只能修改一次；2. 其他信息错误请联系运营人员修改。'
				},
				uploadInfo: {
					btnTxt: '上传头像'
				},
				form: {
					new_pass_word: '',
					ole_pass_word: '',
					confirm_pass_word: ''
				}
			}
		},
		methods: {
			submit() {
				this.changePasswordFun()
			},
			changePasswordFun() {
				if (!this.form.ole_pass_word) {
					uni.showToast({
						title: '请输入当前密码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.form.new_pass_word) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none',
						duration: 2000
					})
					return
				}

				if (!regPwd.test(this.form.new_pass_word)) {
					uni.showToast({
						title: '新密码6-10位，由数字和字母组成',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.form.new_pass_word !== this.form.confirm_pass_word) {
					uni.showToast({
						title: '请输入新密码与确认密码需要保持一致！',
						icon: 'none',
						duration: 2000
					})
					return
				}

				let data = {
					new_pass_word: this.form.new_pass_word,
					ole_pass_word: this.form.ole_pass_word
				}
				changePassword(data).then(res => {
					if (res.code === 200) {
						// uni.showToast({
						// 	title: '密码修改成功，请重新登录！',
						// 	icon: 'none',
						// 	duration: 2000
						// })
						this.toastInfo.title = '密码修改成功'
						this.toastInfo.subTitle = ''
						this.toastInfo.type = 'success'
						this.toastInfo.closeShow = false
						this.toastInfo.visible = true
						setTimeout(()=>{
							this.toastInfo.visible = false
						}, 1500)
						
						uni.removeStorageSync('Authorization');
						uni.removeStorageSync('LoginInfo');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1500)
					} else {
						this.toastInfo.title = res.message
						this.toastInfo.subTitle = ''
						this.toastInfo.type = 'error'
						this.toastInfo.closeShow = false
						this.toastInfo.visible = true
						setTimeout(()=>{
							this.toastInfo.visible = false
						}, 1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting-page {
		background-color: #ffffff;
		padding-bottom: 80px;
		.submit-password{
			display: none;
		}
		.setting-conent {
			margin: 40px auto;
			width: 976px;
			height: 850px;
			background: #FFFFFF;
			box-shadow: 0px 2px 8px 0px rgba(48, 51, 59, 0.1);

			.setting-title {
				width: 100%;
				height: 104px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: 1px solid #EEF1F5;

				.setting-title-img {
					width: 28px;
					height: 26px;
					display: inline-block;
					margin-right: 7px;
				}

				.setting-title-txt {
					font-size: 28px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #2D3036;
				}

				.setting-title-txt-app {
					font-size: 28px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #2D3036;
				}
			}

			.setting-info {
				padding: 0 40px;
				box-sizing: border-box;

				.setting-area {
					padding: 40px 0;
					border-bottom: 1px solid #EEF1F5;
					box-sizing: border-box;

					&:last-child {
						border: none;
					}

					.setting-area-title {
						font-size: 16px;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #2D3036;
						margin-bottom: 24px;
					}



					.setting-area-info {
						.pc-btn{
							display: block;
						}
						.info-li {
							display: flex;
							padding: 12px 0;
							align-items: center;

							.info-title {
								width: 100px;
								text-align: right;
								font-size: 14px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #2D3036;
								padding-right: 16px;
							}

							.info-val {
								ont-size: 14px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #646A74;

								.avatar-view {
									width: 64px;
									height: 64px;
									border-radius: 50%;
									overflow: hidden;
									background: #ccc;
									margin-right: 24px;
								}

								.avatar-img {
									width: 64px;
									height: 64px;
									border-radius: 50%;
								}

								.setting-input {
									width: 240px;
									height: 36px;
									background: #FFFFFF;
									border-radius: 2px;
									border: 1px solid #E7EAEF;
									padding: 8px 12px;
									box-sizing: border-box;
								}

								.pwd-tip {
									height: 16px;
									font-size: 12px;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #979EAA;
									line-height: 16px;
									margin-top: 8px;
								}
							}
						}
					}
				}
			}
		}
	}
	
	.submit-password {
		width: 100%;
		box-sizing: border-box;
		padding: 40px 20px;
		display: none;

		.submit-password-btn {
			&:active {
				opacity: .8;
			}

			width: 100%;
			height: 44px;
			background: #26bbff;
			border-radius: 2px;
			font-size: 16px;
			font-family: PingFangSC-Semibold,
			PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}
	}

	@media screen and (min-width: 0px) and (max-width:1024px) {
		page {
			background: #FAFBFC !important;
			overflow-x: hidden;
		}

		.setting-page {
			padding-bottom: 0;

			.setting-conent {
				width: 100%;
				margin-top: 0;
				background: transparent;
				box-shadow: none;
				height: 100%;
				margin: 0;

				.setting-title {
					height: 54px;
					padding: 0 20px;
					justify-content: flex-start;
					background-color: #ffffff;

					.setting-title-img {
						display: none;
					}

					.setting-title-txt {
						display: none;
					}

					.setting-title-txt-app {
						display: inline-block;
						font-size: 16px;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #2D3036;
					}
				}

				.setting-info {
					box-sizing: border-box;
					padding: 0;

					.setting-area-info {
						box-sizing: border-box;
						padding: 0 0 0 20px;
					}
					.pc-btn{
						display: none !important;
						text-align: left;
					}

					.setting-area {
						padding: 0;

						.setting-area-tip {
							width: 100%;
							padding: 20px 20px 8px 20px;
							box-sizing: border-box;
							background-color: #FAFBFC;
						}

						.setting-area-info {
							.info-li {
								border-bottom: 1px solid #F2F2F2;
								background-color: #ffffff;
								box-sizing: border-box;

								&:last-child {
									border: none;
								}

								.info-title {
									text-align: left;
								}

								.info-val {
									.setting-input {
										border: none;
									}

									.pwd-tip {
										display: none;
									}
								}
							}
						}
					}
				}

			}
		}

		.submit-password {
			width: 100%;
			box-sizing: border-box;
			padding: 40px 20px;
			display: block;

			.submit-password-btn {
				&:active {
					opacity: .8;
				}

				width: 100%;
				height: 44px;
				background: #26bbff;
				border-radius: 2px;
				font-size: 16px;
				font-family: PingFangSC-Semibold,
				PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		}

		.page-footer-bottom {
			display: none;
		}
	}
</style>
